<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="Maciej Ciemborowicz" />
		<title>4bit. Terminal Color Scheme Designer</title>
		<meta name="description" content="Design and download custom terminal color schemes. Creator for (almost) any emulator. Supports .Xresources, iTerm2, Gnome, Xfce, Alacritty, Yakuake, and more."/>
		<link rel="icon" type="image/svg+xml" href="images/favicon.svg">
		<link href="css/merged.css?modified=1682186480" rel="stylesheet" />
		<style id="outline-fix"></style>
	</head>

	<!-- Google tag (gtag.js) -->
	<script async src="https://www.googletagmanager.com/gtag/js?id=G-DV8LQSJD83"></script>
	<script>
		window.dataLayer = window.dataLayer || [];
		function gtag(){dataLayer.push(arguments);}
		gtag('js', new Date());

		gtag('config', 'G-DV8LQSJD83');
	</script>

	<body onmousedown="document.getElementById('outline-fix').innerHTML='a{outline:none}';" onkeydown="document.getElementById('outline-fix').innerHTML=''">

		<div id="fb-root"></div>

		<div class="wrapper">

			<header>
				<h1><a href="http://ciembor.github.io/4bit"><span class="blue">4</span><span class="cyan">b</span><span class="magenta">i</span><span class="red">t</span></a> Terminal Color Scheme Designer</h1>
				<section id="skews">
					<div id="social-media" class="skew">
						<div class="inner">
							<div class="buttons">
								<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-via="ciembor">Tweet</a>
							</div>
						</div>
					</div>
					<a href="#" id="get-scheme-button" class="skew"><span>Download Scheme</span></a>
				</section>
			</header>

			<div class="distance"></div>

			<div id="app" class="vertical-center">
				<section id="display"></section>
				<section id="controls">
					<section id="global-properties">
						<h2>Global Properties</h2>
						<h3>Hue: </h3>
						<div id="hue-slider"></div>
						<h3>Saturation: </h3>
						<div id="saturation-slider"></div>
					</section>
					<section id="lightness">
						<h2>Lightness</h2>
						<h3>Color: </h3>
						<div id="lightness-slider"></div>
						<h3>Black: </h3>
						<div id="black-slider"></div>
						<h3>White: </h3>
						<div id="white-slider"></div>
					</section>
					<section id="advanced">
						<h2>Advanced</h2>
						<ul>
							<li><a href="#dye">Dye</a></li>
							<li><a href="#background">Background</a></li>
							<li><a href="#foreground">Foreground</a></li>
						</ul>
						<div id="dye">
							<input type="text" id="dye-colorpicker" />
							<form class="radio-group" id="dye-radio">
								<input id="dye-1" type="radio" name="dye" value="none" checked="checked" /><label for="dye-1">none</label>
								<input id="dye-2" type="radio" name="dye" value="all" /><label for="dye-2">all</label>
								<input id="dye-3" type="radio" name="dye" value="achromatic" /><label for="dye-3">achromatic</label>
								<input id="dye-4" type="radio" name="dye" value="color" /><label for="dye-4">color</label>
							</form>
						</div>
						<div id="background">
							<input type="text" id="background-colorpicker" />
							<form class="radio-group" id="background-radio">
								<input id="bg-1" type="radio" name="background" value="custom" /><label for="bg-1">custom</label>
								<input id="bg-2" type="radio" name="background" value="black" checked="checked" /><label for="bg-2">black</label>
								<input id="bg-3" type="radio" name="background" value="bright_black" /><label for="bg-3">bright_black</label>
								<input id="bg-4" type="radio" name="background" value="white" /><label for="bg-4">white</label>
								<input id="bg-5" type="radio" name="background" value="bright_white" /><label for="bg-5">bright_white</label>
							</form>
						</div>
						<div id="foreground">
							<input type="text" id="foreground-colorpicker" />
							<form class="radio-group">
								<input id="fg-1" type="radio" name="foreground" value="custom" /><label for="fg-1">custom</label>
								<input id="fg-2" type="radio" name="foreground" value="black" /><label for="fg-2">black</label>
								<input id="fg-3" type="radio" name="foreground" value="bright_black" /><label for="fg-3">bright_black</label>
								<input id="fg-4" type="radio" name="foreground" value="white" checked="checked" /><label for="fg-4">white</label>
								<input id="fg-5" type="radio" name="foreground" value="bright_white" /><label for="fg-5">bright_white</label>
							</form>
						</div>
					</section>
				</section>
			</div>

		</div>

		<footer id="footer">
			<p class="left"><a href="http://github.com/ciembor/4bit" target="_blank"><img src="images/github.png" alt="" /> Fork 4bit on GitHub.</a></p>
			<p class="right">Developed by <a href="https://pl.linkedin.com/in/maciej-ciemborowicz-57202470" rel="me" target="_blank">Maciej Ciemborowicz</a> <a href="https://twitter.com/ciembor" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">follow</a> and <a href="https://github.com/ciembor/4bit#contributors" target="_blank">contributors</a> since 2012.</p>
		</footer>

		<div id="dialog-modal" title="Export scheme to the configuration file">
			<ul>
				<li>
					<p>alacritty <a href="#" target="_blank" id="alacritty-button" class="get-scheme-link">alacritty.yml</a>
				</li>
				<li>
					<p>aterm / rxvt / urxvt / xterm<a href="#" id="xresources-button" class="get-scheme-link">.Xresources</a></p>
				</li>
				<li>
					<p>gnome terminal <a href="#" id="gnome-terminal-button" class="get-scheme-link">shell</a>
				</li>
				<li>
					<p>guake <a href="#" id="guake-button" class="get-scheme-link">shell</a>
				</li>
				<li>
					<p>iTerm2 <a href="#" id="iterm2-button" class="get-scheme-link">*.itermcolors</a>
				</li>
				<li>
					<p>konsole / yakuake <a href="#" id="konsole-button" class="get-scheme-link">*.colorscheme</a>
				</li>
				<li>
					<p>mintty <a href="#" id="mintty-button" class="get-scheme-link">.minttyrc</a>
				</li>
				<li>
					<p>putty <a href="#" id="putty-button" class="get-scheme-link">*.reg</a>
				</li>
				<li>
					<p>terminator <a href="#" id="terminator-button" class="get-scheme-link">config</a>
				</li>
				<li>
					<p>xfce4 terminal <a href="#" id="xfce-terminal-button" class="get-scheme-link">*.scheme</a>
				</li>
			</ul>
		</div>

		<!-- JavaScript =========================================================================== -->

		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
		<script>window.jQuery || document.write("<script src='lib/js/jquery-1.8.0.min.js'>\x3C/script>")</script>

		<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
		<script>window._ || document.write("<script src='lib/js/underscore-min.js'>\x3C/script>")</script>

		<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
		<script>window.Backbone || document.write("<script src='lib/js/backbone-min.js'>\x3C/script>")</script>

		<script src="js/compiled.js?modified=1682186480"></script>

		<script>_4bit();</script>

		<!-- End of JavaScript ==================================================================== -->

	</body>
</html>
